<template>
<form class="form-signin">
  <h2 class="form-signin-heading">{{ $t("auth.please") }}</h2>
  <input type="text" class="form-control" :placeholder="$t('auth.username')" v-model="authInfo.verify.username" required autofocus>
  <input type="password" class="form-control" :placeholder="$t('auth.password') " v-model="authInfo.verify.password" required @keyup.enter="onSubmit">
  <button class="btn btn-lg btn-primary btn-block" type="button" @click.prevent="onSubmit">{{ $t("auth.signin") }}</button>
  <div class="checkbox pull-left">
    <label>
      <input type="checkbox" v-model="authInfo.remember"> {{ $t("auth.rememberme") }}
    </label>
  </div>
  <a href="#" class="pull-right auth-link" @click.prevent="showChangePassword">{{ $t("auth.chgpwd") }}</a>
</form>
</template>

<script>
import debugCfg from 'share/debugCfg.js'
import ebus from 'libs/ebus.js'

export default {
  props: {
    trySignIn: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      authInfo: {
        verify: {
          username: '',
          password: ''
        },
        remember: false        
      }
    }
  },
  methods: {
    showChangePassword () {
      ebus.emit('show-change-password')
    },
    loadAuthInfo () {
      if (window.localStorage) {
        let str = window.localStorage.getItem('authInfo')
        if (!str) {
          return
        }

        let authInfo = JSON.parse(str)
        if (!authInfo) {
          return
        }

        if (authInfo.remember) {
          this.authInfo.verify.username = authInfo.verify.username
          this.authInfo.remember = authInfo.remember
          if (debugCfg.debugOn) {
            this.authInfo.verify.password = authInfo.verify.password
          }
        }
      }
    },
    saveAuthInfo () {
      if (window.localStorage) {
        var authInfo = {
          verify: {
            username: this.authInfo.verify.username
          },
          remember: this.authInfo.remember
        }
        if (debugCfg.debugOn) {
          authInfo.verify.password = this.authInfo.verify.password
        }
        window.localStorage.setItem('authInfo', JSON.stringify(authInfo))
      }
    },
    onSubmit () {
      if (this.authInfo.verify.username === ''
        || this.authInfo.verify.password === '') {
        return
      }
      this.saveAuthInfo()
      this.trySignIn(this.authInfo.verify)
    }
  },
  ready () {
    this.loadAuthInfo()
  }
}
</script>

<style scoped>
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.auth-link {
  margin-top: 10px;
}
</style>